<template>
    <div>
        <div style="margin-bottom: 5px;">
            <el-input v-model="name" placeholder="请输入物品名" suffix-icon="el-icon-search" style="width: 200px;"
                      @keyup.enter.native="loadPost"></el-input>

                      <el-select v-model="enterprise" placeholder="请选择企业">
    <el-option
      v-for="item in enterpriseData"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>

  <el-select v-model="goodstype" placeholder="请选择分类">
    <el-option
      v-for="item in goodstypeData"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
          
    
            <el-button type="primary" style="margin-left: 5px;" @click="loadPost">查询</el-button>
            <el-button type="success" @click="resetParam">重置</el-button>

            
        </div>
        <el-table :data="tableData"
                  :header-cell-style="{ background: '#f2f5fc', color: '#555555' }"
                  border
        >
            <el-table-column prop="id" label="ID" width="60">
            </el-table-column>

            <el-table-column prop="goodsname" label="物品名" width="180">
            </el-table-column>
            <el-table-column prop="enterprisename" label="企业" width="180">
            </el-table-column>
            <el-table-column prop="goodstypename" label="分类" width="180">
            </el-table-column>
            <el-table-column prop="adminname" label="操作人" width="180">
            </el-table-column>
            <el-table-column prop="username" label="申请人" width="180">
            </el-table-column>
            <el-table-column prop="count" label="数量" width="180">
            </el-table-column>
            <el-table-column prop="createtime" label="操作时间" width="180">
            </el-table-column>
            <el-table-column prop="remark" label="备注" width="80">
            </el-table-column>
            
            
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 20,30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        
    </div>
</template>

<script>
    export default {
        name: "RecordManage",
        data() {
          
 
            return {
                user:JSON.parse(sessionStorage.getItem('CurUser')),
                enterpriseData:[],
                goodstypeData:[],
                tableData : [],
                pageSize:10,
                pageNum:1,
                total:0,
                name:'',
               enterprise:'',
               goodstype:'',
                centerDialogVisible:false,
                form:{
                    id:'',
                  
                    name:'',
                    enterprise:'',
                    goodstype:'',
                    count:0,
                    remark:'',
                   
                    
                },
                
            }
        },
        methods:{
            formatEnterprise(row){
            
             let temp = this.enterpriseData.find(item=>{
                return item.id == row.enterprise;
             })
             return temp && temp.name;
            },
            formatGoodstype(row){
            
            let temp = this.goodstypeData.find(item=>{
               return item.id == row.goodstype;
            })
            return temp && temp.name;
           },
            resetForm() {
                this.$refs.form.resetFields();
            },
            
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageNum=1
                this.pageSize=val
                this.loadPost()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNum=val
                this.loadPost()
            },
           
            resetParam(){
                this.name=''
                this.enterprise=''
                this.goodstype=''
            },
            loadPost(){
                this.$axios.post( 'http://localhost:8083/record/listPage', {
    pageSize:this.pageSize,
    pageNum:this.pageNum,
    param:{
      name:this.name,
     enterprise:this.enterprise+'',
     goodstype:this.goodstype+'',
     role:this.user.role+'',
     userId:this.user.id+''
    }
}).then(res=>res.data).then(res=>{
                    console.log(res)
                    if(res.code==200){
                        this.tableData=res.data
                        this.total=res.total
                    }else{
                        alert('获取数据失败')
                    }

                })
            },
            loadEnterprise(){
                this.$axios.get( 'http://localhost:8083/enterprise/list').then(res=>res.data).then(res=>{
                    console.log(res)
                    if(res.code==200){
                        this.enterpriseData=res.data
                        console.log(this.enterpriseData)
                        
                    }else{
                        alert('获取数据失败')
                    }

                })
            },
            loadGoodstype(){
                this.$axios.get( 'http://localhost:8083/goodstype/list').then(res=>res.data).then(res=>{
                    console.log(res)
                    if(res.code==200){
                        this.goodstypeData=res.data
                   //     console.log(this.goodstypeData)
                        
                    }else{
                        alert('获取数据失败')
                    }

                })
            }
        },
          
        
        beforeMount() {
            this.loadEnterprise()
            this.loadGoodstype()
            this.loadPost()
        
        }
    }
</script>

<style scoped>

</style>